/* eslint-disable max-len */
/* eslint-disable no-multiple-empty-lines */
/* eslint-disable prettier/prettier */

import React, { PureComponent } from 'react';
import { View, StyleSheet, Text, Image } from 'react-native';
import Strings from '../../i18n';
import style from '../../config/style';
import Res from '../../res';



class CleanCottonView extends PureComponent {
  render() {
    return (

      <View style={style.container}>

        {/* 水泵仓过滤棉清洗 */}
        <View style={{ backgroundColor: '#FFFFFF', height: 50, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
          <Text style={styles.title}>{Strings.warning_detail_page_title_pump_filter_cotton}</Text>
        </View>


        <View style={{ backgroundColor: '#FFFFFF', height: 800, flexDirection: 'column' }}>
          <Text style={styles.subtitle}>{Strings.warning_detail_title_pump_filter_cotton1}</Text>
          <Text style={styles.contents}>{Strings.warning_detail_content_pump_filter_cotton0}</Text>
          <Image style={{flexDirection: 'row', justifyContent : 'center', alignContent : 'center', width:'100%', height:200}} source={require('../../res/cleanpumpA.png')} />
          <Text style={styles.contents}>{Strings.warning_detail_content_pump_filter_cotton1}</Text>
          <Image style={{flexDirection: 'row', justifyContent : 'center', alignContent : 'center', width:'100%', height:200}} source={require('../../res/cleanpumpB.png')} />
          <Text style={styles.contents}>{Strings.warning_detail_content_pump_filter_cotton2}</Text>
          <Image style={{flexDirection: 'row', justifyContent : 'center', alignContent : 'center', width:'100%', height:200}} source={require('../../res/cleanpumpC.png')} />
          <Text style={styles.contents}>{Strings.warning_detail_content_pump_filter_cotton3}</Text>
          <Image style={{flexDirection: 'row', justifyContent : 'center', alignContent : 'center', width:'100%', height:200}} source={require('../../res/cleanpumpD.png')} />
          <Text style={styles.contents}>{Strings.warning_detail_content_pump_filter_cotton4}</Text>
          <Image style={{flexDirection: 'row', justifyContent : 'center', alignContent : 'center', width:'100%', height:200}} source={require('../../res/cleanpumpE.png')} />

          <Text style={styles.subtitle}>{Strings.warning_detail_title_pump_filter_cotton2}</Text>
          <Text style={styles.contents}>{Strings.warning_detail_content_pump_filter_cotton5}</Text>
          <Image style={{flexDirection: 'row', justifyContent : 'center', alignContent : 'center', width:'100%', height:200}} source={require('../../res/cleanpumpF.png')} />
          <Text style={styles.contents}>{Strings.warning_detail_content_pump_filter_cotton6}</Text>
          <Image style={{flexDirection: 'row', justifyContent : 'center', alignContent : 'center', width:'100%',height:200}} source={require('../../res/cleanpumpG.png')} />
          <Text style={styles.contents}>{Strings.warning_detail_content_pump_filter_cotton7}</Text>
        </View>
      </View>
    );
  }

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f8f8f8',
  },
  title:{
    marginStart: 20,
    fontSize: 30,
    color: '#333333',
  },
  subtitle:{
    marginStart: 20,
    marginTop: 10,
    fontSize: 20,
    color: '#333333',
  },
  contents:{
    marginStart: 20,
    marginTop: 10,
    fontSize: 15,
    color: '#333333',
  },


});

export default CleanCottonView;
